<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script type="text/javascript" src="../js/lib/remtest.js" ></script>
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" href="../css/zjteamapp.css" />
		<script type="text/javascript" src="../js/iconfont.js" ></script>

		<style>
			.iconzs {
				width: 0.24rem;
				height: 0.24rem;
				
				fill: currentColor;
				overflow: hidden;
			}
			.mui-icon-eye{
				display: none;
			}
			body {
				background: url(../images/loginbg.jpg) no-repeat center;
			}
			
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
		
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-input-group {
				position: relative;
				padding: 0;
				border: 0;
				background-color: rgba(0, 0, 0, 0);
			}
			
			.mui-btn {
				padding: 0.1rem;
				width: 5.96rem;
				height: 0.76rem;
				margin: 0 auto;
			}
			
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				/*-webkit-filter: grayscale(100%); */
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
			
			.mui-input-group:before {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				height: 0px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.mui-input-group:first-child {
				margin-top: 180px;
			}
			
			.mui-content-padded {
				margin-top: 50px;
			}
			
			.mui-btn-blue,
			.mui-btn-primary,
			input[type=submit] {
				color: #fff;
				border: 1px solid #ecb714;
				background-color: #ecb714;
				border-radius: 30px;
			}
			
			.link-area {
				display: block;
				padding-top: 3rem;
				text-align: center;
			}
			
			#forgetPasswordp {
				float: right;
				color: #b5b5b5;
				padding-top: 10px;
			}
			
			#forgetPasswordp a {
				color: #b5b5b5;
			}
			
			#forgetPasswordp:after {
				clear: both;
				content: "";
				height: 0px;
				display: block;
				visibility: hidden;
			}
			
			#login-form {
				width: 95%;
				margin: 0 auto;
			}
			
			.mui-input-group:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 0px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.link-area {
				color: #b5b5b5;
			}
			
			.link-area a {
				color: #ecb714;
			}
			
			.mui-input-group label {
				width: 0.54rem;
				/*padding: 0 0.2rem;*/
				line-height: 0.5rem;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				float: left;
				width: 85%;
				margin-bottom: 0;
				padding-left: 0.2rem;
				border: 0;
				padding-top: 0.4rem;
			}
			
			.mui-input-group .mui-input-row{
				height:0.76rem;
				font-size: 0.24rem;
				color: #B6B6B6;
				line-height: 0.76rem;
				
			}
		</style>

	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">注册</h1>
		</header>-->
		<div class="mui-content">

		<div style="text-align: center;margin: 0 auto; margin-top: 0.74rem; margin-bottom: 1.24rem; height: 0.78rem; width:1.38rem; ">
            <img src="../images/zclogo.png" width="100%">
        </div>

			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<label>
						 <span class="mui-icon" >	                    	
		                    	<svg class="iconzs">
 									 <use xlink:href="#icon-shuruzhanghao"></use>
								</svg>
		                    </span>
					</label>
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号码">
				</div>
				<div class="mui-input-row">
					<label>
						 <span class="mui-icon" >	                    	
		                    	<svg class="iconzs">
 									 <use xlink:href="#icon-shurumima"></use>
								</svg>
		                    </span>
					</label>
					<input id='password' type="password" class="mui-input-password" placeholder="请输入密码">
				</div>
				<div class="mui-input-row">
					<label>
						<span class="mui-icon" >	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-yanzhengma"></use>
								</svg>
		                </span>
					</label>
					<input id='code' type="text" class="mui-input-clear" placeholder="请输入验证码" style="width: 40%; float: left;">
					<div class="yzm" style="float: left; width: 1.9rem; height:0.76rem; background-size: cover;">
						<img id='img_code' src='http://www.99990158.com/tools/verify_code.ashx' style="width: 100%;height: 100%; " />
					</div>
					<p style=" color: #8b8b8b;  height: 0.76rem;width: 0.9rem; float: right;line-height: 0.2rem; font-size: 0.18rem;padding: 0.18rem 0;">点击图片</br>更换一张</p>

				</div>

			</form>

			<div class="mui-content-padded">

				<button id='btnreg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
				<div class="link-area">已有账号？请
					<a id='login'>登录></a>
				</div>
			</div>
			<div class="mui-content-padded oauth-area">

			</div>
		</div>
		<script src="../js/mui.min.js"></script>

		<script>
			(function($, doc) {
				$.init({
					statusBarBackground: '#f7f7f7'
				});
				$.plusReady(function() {

				});
				
				doc.getElementById('login').addEventListener('tap', function() {
					mui.back();
				});

				doc.getElementById('img_code').addEventListener('tap', function() {
					this.src = this.src;
				});
				doc.getElementById('btnreg').addEventListener('tap', function() {
					var data = {
						txtUserName: doc.getElementById('account').value,
						txtPassword: doc.getElementById('password').value,
						txtMobile: doc.getElementById('account').value,
						txtEmail: '',
						txtCode: doc.getElementById('code').value,
						Verification: function() {
							console.log(/^1[3578]\d{9}$/.test(this.txtUserName));
							if(!/^1[3578]\d{9}$/.test(this.txtUserName))
							{
									 outSet('手机号码不正确');

									return false;
							}
							/*if(!/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/.test(this.txtPassword))
								return false;*/
							console.log(this.txtPassword.length < 6);
							if(this.txtPassword.length < 6)
							{
								outSet('密码长度必须6位以上');
								return false;
							}
								
							return true;
						}
					};
					doc.getElementById('img_code').toggle;
					if(data.Verification()) {
						$.post('http://www.99990158.com/tools/submit_ajax.ashx?action=user_register&site=main', data, function(res) {
							 
							outSet(res.msg);
							console.log(JSON.stringify(res));
						}, 'json');
					} else {
						console.log('验证不通过');
					}

				});
			}(mui, document));
			
			function outSet(s) {

				mui.plusReady(function() {
					plus.nativeUI.toast(s);
				});

			}
		</script>
	</body>

</html>